//外边距
.margin(@margin: @base-default-margin){
  margin:@margin;
}
.margin-0(){
  .margin(0) !important;
}
.margin-xs(){
  .margin(@base-margin-xs);
}
.margin-sm(){
  .margin(@base-margin-sm);
}
.margin-md(){
  .margin(@base-margin-md);
}
.margin-lg(){
  .margin(@base-margin-lg);
}
.margin-xl(){
  .margin(@base-margin-xl);
}
.margin-xxl(){
  .margin(@base-margin-xxl);
}

.margin-left(@margin: @base-default-margin){
  margin-left:@margin;
}
.margin-left-0(){
  .margin-left(0) !important;
}
.margin-left-xs(){
  .margin-left(@base-margin-xs);
}
.margin-left-sm(){
  .margin-left(@base-margin-sm);
}
.margin-left-md(){
  .margin-left(@base-margin-md);
}
.margin-left-lg(){
  .margin-left(@base-margin-lg);
}
.margin-left-xl(){
  .margin-left(@base-margin-xl);
}
.margin-left-xxl(){
  .margin-left(@base-margin-xxl);
}

.margin-right(@margin: @base-default-margin){
  margin-right:@margin;
}
.margin-right-0(){
  .margin-right(0) !important;
}
.margin-right-xs(){
  .margin-right(@base-margin-xs);
}
.margin-right-sm(){
  .margin-right(@base-margin-sm);
}
.margin-right-md(){
  .margin-right(@base-margin-md);
}
.margin-right-lg(){
  .margin-right(@base-margin-lg);
}
.margin-right-xl(){
  .margin-right(@base-margin-xl);
}
.margin-right-xxl(){
  .margin-right(@base-margin-xxl);
}

.margin-top(@margin: @base-default-margin){
  margin-top:@margin;
}
.margin-top-0(){
  .margin-top(0) !important;
}
.margin-top-xs(){
  .margin-top(@base-margin-xs);
}
.margin-top-sm(){
  .margin-top(@base-margin-sm);
}
.margin-top-md(){
  .margin-top(@base-margin-md);
}
.margin-top-lg(){
  .margin-top(@base-margin-lg);
}
.margin-top-xl(){
  .margin-top(@base-margin-xl);
}
.margin-top-xxl(){
  .margin-top(@base-margin-xxl);
}

.margin-bottom(@margin: @base-default-margin){
  margin-bottom:@margin;
}
.margin-bottom-0(){
  .margin-bottom(0) !important;
}
.margin-bottom-xs(){
  .margin-bottom(@base-margin-xs);
}
.margin-bottom-sm(){
  .margin-bottom(@base-margin-sm);
}
.margin-bottom-md(){
  .margin-bottom(@base-margin-md);
}
.margin-bottom-lg(){
  .margin-bottom(@base-margin-lg);
}
.margin-bottom-xl(){
  .margin-bottom(@base-margin-xl);
}
.margin-bottom-xxl(){
  .margin-bottom(@base-margin-xxl);
}

//水平
.margin-horizontal(@margin: @base-default-margin){
  .margin-left(@margin);
  .margin-right(@margin);
}
.margin-horizontal-0(){
  .margin-horizontal(0) !important;
}
.margin-horizontal-xs(){
  .margin-horizontal(@base-margin-xs);
}
.margin-horizontal-sm(){
  .margin-horizontal(@base-margin-sm);
}
.margin-horizontal-md(){
  .margin-horizontal(@base-margin-md);
}
.margin-horizontal-lg(){
  .margin-horizontal(@base-margin-lg);
}
.margin-horizontal-xl(){
  .margin-horizontal(@base-margin-xl);
}
.margin-horizontal-xxl(){
  .margin-horizontal(@base-margin-xxl);
}

//垂直
.margin-vertical(@margin: @base-default-margin){
  .margin-top(@margin);
  .margin-bottom(@margin);
}
.margin-vertical-0(){
  .margin-vertical(0) !important;
}
.margin-vertical-xs(){
  .margin-vertical(@base-margin-xs);
}
.margin-vertical-sm(){
  .margin-vertical(@base-margin-sm);
}
.margin-vertical-md(){
  .margin-vertical(@base-margin-md);
}
.margin-vertical-lg(){
  .margin-vertical(@base-margin-lg);
}
.margin-vertical-xl(){
  .margin-vertical(@base-margin-xl);
}
.margin-vertical-xxl(){
  .margin-vertical(@base-margin-xxl);
}



//内边距
.padding(@margin: @base-default-margin){
  padding:@margin;
}
.padding-0(){
  .padding(0) !important;
}
.padding-xs(){
  .padding(@base-margin-xs);
}
.padding-sm(){
  .padding(@base-margin-sm);
}
.padding-md(){
  .padding(@base-margin-md);
}
.padding-lg(){
  .padding(@base-margin-lg);
}
.padding-xl(){
  .padding(@base-margin-xl);
}
.padding-xxl(){
  .padding(@base-margin-xxl);
}

.padding-left(@margin: @base-default-margin){
  padding-left:@margin;
}
.padding-left-0(){
  .padding-left(0) !important;
}
.padding-left-xs(){
  .padding-left(@base-margin-xs);
}
.padding-left-sm(){
  .padding-left(@base-margin-sm);
}
.padding-left-md(){
  .padding-left(@base-margin-md);
}
.padding-left-lg(){
  .padding-left(@base-margin-lg);
}
.padding-left-xl(){
  .padding-left(@base-margin-xl);
}
.padding-left-xxl(){
  .padding-left(@base-margin-xxl);
}

.padding-right(@margin: @base-default-margin){
  padding-right:@margin;
}
.padding-right-0(){
  .padding-right(0) !important;
}
.padding-right-xs(){
  .padding-right(@base-margin-xs);
}
.padding-right-sm(){
  .padding-right(@base-margin-sm);
}
.padding-right-md(){
  .padding-right(@base-margin-md);
}
.padding-right-lg(){
  .padding-right(@base-margin-lg);
}
.padding-right-xl(){
  .padding-right(@base-margin-xl);
}
.padding-right-xxl(){
  .padding-right(@base-margin-xxl);
}

.padding-top(@margin: @base-default-margin){
  padding-top:@margin;
}
.padding-top-0(){
  .padding-top(0) !important;
}
.padding-top-xs(){
  .padding-top(@base-margin-xs);
}
.padding-top-sm(){
  .padding-top(@base-margin-sm);
}
.padding-top-md(){
  .padding-top(@base-margin-md);
}
.padding-top-lg(){
  .padding-top(@base-margin-lg);
}
.padding-top-xl(){
  .padding-top(@base-margin-xl);
}
.padding-top-xxl(){
  .padding-top(@base-margin-xxl);
}

.padding-bottom(@margin: @base-default-margin){
  padding-bottom:@margin;
}
.padding-bottom-0(){
  .padding-bottom(0) !important;
}
.padding-bottom-xs(){
  .padding-bottom(@base-margin-xs);
}
.padding-bottom-sm(){
  .padding-bottom(@base-margin-sm);
}
.padding-bottom-md(){
  .padding-bottom(@base-margin-md);
}
.padding-bottom-lg(){
  .padding-bottom(@base-margin-lg);
}
.padding-bottom-xl(){
  .padding-bottom(@base-margin-xl);
}
.padding-bottom-xxl(){
  .padding-bottom(@base-margin-xxl);
}

//水平
.padding-horizontal(@margin: @base-default-margin){
  .padding-left(@margin);
  .padding-right(@margin);
}
.padding-horizontal-0(){
  .padding-horizontal(0) !important;
}
.padding-horizontal-xs(){
  .padding-horizontal(@base-margin-xs);
}
.padding-horizontal-sm(){
  .padding-horizontal(@base-margin-sm);
}
.padding-horizontal-md(){
  .padding-horizontal(@base-margin-md);
}
.padding-horizontal-lg(){
  .padding-horizontal(@base-margin-lg);
}
.padding-horizontal-xl(){
  .padding-horizontal(@base-margin-xl);
}
.padding-horizontal-xxl(){
  .padding-horizontal(@base-margin-xxl);
}

//垂直
.padding-vertical(@margin: @base-default-margin){
  .padding-top(@margin);
  .padding-bottom(@margin);
}
.padding-vertical-0(){
  .padding-vertical(0) !important;
}
.padding-vertical-xs(){
  .padding-vertical(@base-margin-xs);
}
.padding-vertical-sm(){
  .padding-vertical(@base-margin-sm);
}
.padding-vertical-md(){
  .padding-vertical(@base-margin-md);
}
.padding-vertical-lg(){
  .padding-vertical(@base-margin-lg);
}
.padding-vertical-xl(){
  .padding-vertical(@base-margin-xl);
}
.padding-vertical-xxl(){
  .padding-vertical(@base-margin-xxl);
}

.fl(){
  float:left;
}
.fr(){
  float: right;
}
.fc(){
  &:after{
    clear: both;
  }
  &:after,
  &:before{
    content: ' ';
    display: block;
  }
}
.show(){
  display: block;
}
.hide(){
  display: none;
}
.center(){
  display: block;
  .margin-left(auto);
  .margin-right(auto);
}
.block(){
  display: block;
}
.inline-block{
  display: inline-block;
}

//字体大小分配
.text-xs(){
  font-size: @base-font-size-xs;
}
.text-sm(){
  font-size: @base-font-size-sm;
}
.text-md(){
  font-size: @base-font-size-md;
}
.text-lg(){
  font-size: @base-font-size-lg;
}
.text-xl(){
  font-size: @base-font-size-xl;
}
.text-xxl(){
  font-size: @base-font-size-xxl;
}
.text-xxxl(){
  font-size: @base-font-size-xxxl;
}

//文字对齐
.text-left(){
  text-align: left;
}
.text-center(){
  text-align: center;
}
.text-right(){
  text-align: right;
}
.text-justify(){
  text-align: justify;
}
.text-top(){
  vertical-align: top;
  display:table-cell;
  width: 1000rem;
}
.text-middle(){
  vertical-align: middle;
  display:table-cell;
  width: 1000rem;
}
.text-bottom(){
  vertical-align: bottom;
  display:table-cell;
  width: 1000rem;
}

//文字截断
.text-truncate(){
  word-wrap: normal; /* for IE */
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.text-truncate-line(@line:5){
  overflow : hidden;
  display: -webkit-box;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: @line;
  -webkit-box-orient: vertical;
}

//圆角定义
.radius(@size : @base-default-radius-size){
  border-radius: @size;
}
.radius-0(){
  .radius(0) !important;
}
.radius-xs(){
  .radius(@base-radius-size-xs);
}
.radius-sm(){
  .radius(@base-radius-size-sm);
}
.radius-md(){
  .radius(@base-radius-size-md);
}
.radius-lg(){
  .radius(@base-radius-size-lg);
}
.radius-xl(){
  .radius(@base-radius-size-xl);
}

//阴影定义
.shadow(@size){
  box-shadow: @size;
  -moz-box-shadow: @size;
  -o-box-shadow: @size;
  -webkit-box-shadow: @size;
}

//变灰函数
.gray(@percentage : 100){
  @val : (@percentage/100);
  filter: grayscale(@percentage * 1%);
  -webkit-filter: grayscale(@percentage * 1%);
  -moz-filter: grayscale(@percentage * 1%);
  -ms-filter: grayscale(@percentage * 1%);
  -o-filter: grayscale(@percentage * 1%);
  filter: url(desaturate.svg#grayscale);
  filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=@val);
  -webkit-filter: grayscale(@val);
}
//禁用
.disabled(){
  pointer-events: none;
  cursor: not-allowed;
  .shadow(none);
}

//过渡
.transition(@param){
  -moz-transition:@param; /* Firefox 4 */
  -webkit-transition:@param; /* Safari and Chrome */
  -o-transition:@param; /* Opera */
  transition:@param;
}

.transform(@param){
  -moz-transform: @param;
  -webkit-transform: @param;
  -o-transform: @param;
  transform: @param;
}

.user-select(@param){
  -webkit-user-select: @param;
  -moz-user-select: @param;
  -ms-user-select: @param; // IE10+
  user-select: @param;
}

